<template>
    <div>
        <div class="middle">
            <div class="centerConTent">
                <div class="login_bg_BhkCABSr"> <img src="../../assets/img/login_bg.BhkCABSr.jpg" alt=""> </div>

                <div class="centerfrom">
                    <div class="LandingMode">
                        <div class="LandingModeSize">账号登陆</div>
                        <div class="LandingModeCode">
                            <img src="../../assets/img/scanCode.png">
                        </div>
                    </div>

                    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100%" class="demo-ruleForm"
                        :size="formSize" status-icon>
                        <!-- 用户名 -->
                        <div class="usernameInp">
                            <div class="inp">
                                <div class="icon">
                                    <el-icon>
                                        <User />
                                    </el-icon>
                                </div>
                                <el-form-item prop="name">
                                    <el-input style="width: 313px;" v-model="ruleForm.name" placeholder="用户名" />
                                </el-form-item>
                            </div>
                        </div>
                        <!-- 密码 -->
                        <div class="usernameInp">
                            <div class="inp">
                                <div class="icon">
                                    <el-icon>
                                        <Lock />
                                    </el-icon>
                                </div>
                                <el-form-item prop="passWord">
                                    <el-input style="width: 313px;" v-model="ruleForm.passWord" placeholder="密码" />
                                </el-form-item>
                            </div>
                        </div>
                        <!-- 验证码 -->
                        <div class="usernameInp">
                            <div class="inp">
                                <div class="icon">
                                    <el-icon>
                                        <CirclePlus />
                                    </el-icon>
                                </div>
                                <el-form-item prop="code">
                                    <el-input v-model="ruleForm.code" placeholder="输入验证码" />
                                </el-form-item>
                            </div>
                            <div class="imgcode">
                                <img src="../../assets/img/login_bg.BhkCABSr.jpg" alt="">
                            </div>
                        </div>
                    </el-form>

                    <div class="submit">
                        <div class="check">
                            <el-checkbox v-model="checked1" label="记住我" size="large" />
                        </div>
                        <div class="but">
                            <el-button type="success">登陆</el-button>
                        </div>
                    </div>

                    <el-divider>
                        其他登录方式
                    </el-divider>


                    <div class="loginWay">
                        <div class="loginWayType">
                            <img src="../../assets/img/weixin.svg" alt="">
                        </div>
                        <div class="loginWayType">
                            <img src="../../assets/img/QQ.svg" alt="">
                        </div>
                        <div class="loginWayType">
                            <img src="../../assets/img/github-fill.svg" alt="">
                        </div>
                        <div class="loginWayType">
                            <img src="../../assets/img/mayun.svg" alt="">
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { User, Lock, CirclePlus } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import type {RuleForm} from '@/type/LoginType'
const checked1 = ref(true)
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  passWord: '',
  code: ''
})

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 1, max: 10, message: '请输入用户名', trigger: 'blur' },
  ],
  passWord: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 1, max: 10, message: '请输入密码', trigger: 'blur' },
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { min: 1, max: 10, message: '请输入验证码', trigger: 'blur' },
  ],
})
</script>

<style scoped lang='less'>
@import url('../../assets/less/loginCss/loginComCss/loginCom.less');
.el-form-item--defaul {
  margin-bottom: 0px;
}

.el-form-item {
  margin-bottom: 0px;
}

/deep/.el-form-item__content {
  margin-left: 0px !important;
  // height: 100%;
}

/deep/.el-input__wrapper {
  box-shadow: 0px 0px 0px;
  padding: 5px;
}

/deep/.el-input {
  // width: 313px;
  height: 100%;
}

/deep/.el-button {
  width: 100%;
  padding: 20px;
}

</style>